<template>
    <div class="serve_page">
        <div class="top" style="background-image: url(http://www.91xxkj.com/static/images/banner-4.jpg);">
            <div class="top-inner">
                <div class="top-img">
                    <img src="http://www.91xxkj.com/static/images/varmix.png" alt="">
                </div>
                <div class="top-title">
                    <h2>智慧服务</h2>
                </div>
                <div class="top-text">
                    <p>面向患者端的智能化应用，让患者就医更方便。</p>
                </div>
                <div class="top-list">
                    <div class="mb-4">
                        <el-button type="primary" plain>综合预约管理平台</el-button>
                        <el-button type="primary" plain>互联网+护理</el-button>
                        <el-button type="primary" plain>职业健康管理平台</el-button>
                    </div>
                </div>
            </div>
        </div>
        <div class="font">
            <p class="font-title">综合预约管理平台</p>
            <div class="font-text">
                <p>全业务、全场景智能预约，全面提升医患体验</p>
            </div>
        </div>
        <div class="summary">
            <div class="inner">
                <div class="summary-top">
                    <h4 class="summary-title">产品概述</h4>
                    <p class="summart-text">
                        综合预约平台依托院内信息系统，通过整合预约渠道、号源统一管理，
                        为患者提供全诊疗周期的预约服务，进而促使医院流程一体化，管理规范化。
                        平台为患者统筹安排最优诊疗服务次序，提升患者的就医效率和满意度。
                        提升医护人员工作效率，提升医院管理能力和服务能力。
                        助力打造诊前-诊中-诊后全覆盖，线上线下想结合，院内院外一体化的智慧服务新生态。
                    </p>
                </div>
                <div class="summary-top">
                    <h4 class="summary-title">平台涵盖</h4>
                    <br>
                    <br>
                </div>
                <div class="block text-center" style="text-align:center">
                    <el-carousel height="200px" type="card" :autoplay="false" trigger="click">
                        <el-carousel-item v-for="item in imageUrl" :key="item.url" class="carousel-item">
                            <div class="card-content">
                                <img :src="item.url" alt="" />
                                <div class="caption">{{ item.caption }}</div>
                            </div>
                        </el-carousel-item>
                    </el-carousel>
                </div>
            </div>
        </div>
        <div class="section_4">
            <div class="tab-box">
                <div class="inner">
                    <div class="table-title">
                        <img src="http://www.91xxkj.com/static/images/news/serve1.png" alt="">
                    </div>
                    <br>
                </div>
            </div>
            <div class="characteristic">
                <div class="characteristic_title">特色功能</div>
                <div class="inner">
                    <div class="img_box">
                        <div class="img_item" v-for="(item, index) in imgItems" :key="index">
                            <img :src="item.src" alt="">
                        </div>
                    </div>
                    <div class="text_box">
                        <div class="text_item" v-for="(item, index) in textItems" :key="index" :data-id="index">
                            <div class="title">{{ item.title }}</div>
                            <div class="text">{{ item.text }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { onMounted, ref } from 'vue';

const imageUrl = [
    { url: "http://www.91xxkj.com/static/images/icon-13.png", caption: "医技预约" },
    { url: "http://www.91xxkj.com/static/images/icon-13.png", caption: "治疗预约" },
    { url: "http://www.91xxkj.com/static/images/icon-13.png", caption: "手术预约" },
    { url: "http://www.91xxkj.com/static/images/icon-13.png", caption: "床位预约" },
    { url: "http://www.91xxkj.com/static/images/icon-13.png", caption: "病案到家" }
];

const imgItems = ref([
    { src: 'http://www.91xxkj.com/static/images/service_1_img_1_copy.png' },
    { src: 'http://www.91xxkj.com/static/images/service_1_img_2_copy.png' },
    { src: 'http://www.91xxkj.com/static/images/service_1_img_3_copy.png' },
    { src: 'http://www.91xxkj.com/static/images/service_1_img_4_copy.png' },
    { src: 'http://www.91xxkj.com/static/images/service_1_img_5_copy.png' }
]);

const textItems = ref([
    { title: '多渠道预约 提升体验', text: '多渠道预约方式 满足不同场景需求极大优化就医流程及体验' },
    { title: '在线挂号 分时段预约', text: '在线分时段预约挂号 自主选择就医时间线下就医减少交叉感染' },
    { title: '候诊排队 减少等待', text: '在线排队候真 实时推送候诊信息减少患者无谓等待' },
    { title: '在线支付 缴费记录可查', text: '在线分时段预约挂号 自主选择就医时间线下就医减少交叉感染' },
    { title: '智能导诊 轻松选医生', text: '身体不舒服不知道挂哪科？ 智能助手来帮忙智能推荐科室助你就诊' }
]);

onMounted(() => {
    const imgElements = document.querySelectorAll('.img_item');
    const textElements = document.querySelectorAll('.text_item');

    const handleScroll = () => {
        const viewHeight = window.innerHeight;
        let currentIndex = -1;

        let showFirstImg = true;
        let highlightFirstText = true;

        textElements.forEach((item, index) => {
            const rect = item.getBoundingClientRect();
            if (rect.top <= viewHeight * 0.8 && rect.bottom >= viewHeight * 0.2) {
                currentIndex = index;
                if (index > 0) {
                    showFirstImg = false;
                    highlightFirstText = false;
                }
            }
        });

        textElements.forEach((item, index) => {
            if (index === currentIndex) {
                item.classList.add('active');
                imgElements[index].classList.add('active');1
            } else {
                item.classList.remove('active');
                imgElements[index].classList.remove('active');
            }
        });

        imgElements[0].classList.toggle('first', showFirstImg);
        textElements[0].classList.toggle('first', highlightFirstText);
    };

    document.addEventListener('scroll', handleScroll);
    handleScroll(); // Call once on load
});
</script>

<style scoped>
.top {
    height: 550px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.top-inner {
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.top-title {
    padding: 20px 0 10px;
    font-size: 26px;
}

.top-text {
    padding-bottom: 60px;
    font-size: 15px;
}

.top-list {
    display: flex;
    align-items: center;
    justify-content: center;
}

.top-list .el-button {
    border-radius: 0;
    font-size: 16px;
    padding: 10px 20px;
    color: white;
    background-color: transparent;
    border: 2px solid white;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

.top-list .el-button:hover {
    background-color: #0070d7;
    color: white;
    border-color: #0070d7;
}

.top-list .el-button {
    min-width: 200px;
    height: 50px;
}

.font {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 80px 0 70px;
}

.font-title {
    background: linear-gradient(to top, #00a2e9, #2a60ab);
    -webkit-background-clip: text;
    color: transparent;
    font-size: 40px;
    font-weight: bold;
}

.font-text {
    padding-top: 25px;
    font-size: 18px;
    color: #666;
}

.summary {
    background: url(/img/banner-5.png) center / cover no-repeat;
    padding: 100px 0 120px;
    height: 350px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.inner {
    padding: 0;
    max-width: 1300px;
    position: relative;
    margin: 0 auto;
    width: 80%;
}

.summary-top {
    width: 75%;
    margin: 0 auto;
    text-align: center;
}

.summary-title {
    font-size: 36px;
    color: #000;
    font-weight: 400;
}

.summart-text {
    font-size: 16px;
    padding: 30px 0 40px;
    color: #666;
}

.summary-swiper {
    width: 100%;
}

.swiper-container {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: hidden;
    list-style: none;
    padding: 0;
    z-index: 1;
}

.swiper-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: flex;
    transition-property: transform;
    box-sizing: content-box;
}

.card-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.card-content>img {
    width: 20%;
    height: auto;
    border-radius: 10px;
}

.caption {
    margin-top: 10px;
    font-size: 16px;
    color: #000000;
}

.serve_page .section_4 {
    padding: 60px 0;
}

.serve_page .section_4 .tab_title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: center;
    max-width: 80%;
    margin: 0 auto 15px auto;
}

img {
    max-width: 100%;
    height: auto;
}

.characteristic {
    height: 800px;
    padding: 70px 0;
    background: url(http://www.91xxkj.com/static/images/single_slider_bg.jpg) center / cover no-repeat;
    padding: 90px 0;
    box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
}

.characteristic .characteristic_title {
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 35px;
    text-align: center;
}

.img_box {
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 0 20px;
}

.characteristic>.inner {
    display: flex;
    position: relative;
}

.img_item {
    display: none;
    opacity: 0;
    transition: opacity 0.3s;
}

.img_item.active {
    display: block;
    opacity: 1;
}

.img_item.first {
    display: block;
    opacity: 1;
}

.text_box {
    width: 50%;
    padding-top: 8%;
}

.text_item {
    margin-bottom: 30px;
    opacity: 0.3;
    color: gray;
    transition: opacity 0.3s, color 0.3s;
}

.text_item.active {
    opacity: 1;
    color: black;
}

.text_item.first {
    color: black;
    opacity: 1;
}

.title {
    font-size: 25px;
    margin-bottom: 12px;
    font-weight: bold;
}

.text {
    font-size: 16px;
    line-height: 2;
}
</style>